<template>
    <div>
      <div class="box1"></div>
      <div class="head">
        <router-link to="/today">
          <el-icon class="arrow" :size=35><Back /></el-icon>
        </router-link>
        <i class="iconfont icon-aixin"></i>
      </div>
      
      <div class="content">
        <div class="title">
          {{ articleDetail.title }}
        </div>
        <div class="desc"> 
          <div class="author">作者：{{ articleDetail.author }}</div>
          <div class="date">{{ articleDetail.created_at.slice(0,10)}}</div>
        </div>
       
        <div class="today-content">
          {{ articleDetail.content }}
        </div>
      </div>

      <div class="foot">
        <i class="iconfont icon-shoucang"></i>
        <el-icon color=#8B5CF6><Share /></el-icon>

      </div>
      
      <draggable/>
  </div>
    
</template>

<script setup>
import { formateDate } from '@/utils/formateDate.js'
import { onMounted, ref,computed } from 'vue'
import draggable from '@/components/draggable.vue';
import { useArticleStore } from '@/stores/articleStore'
import { useRoute } from 'vue-router'


const route = useRoute()
const articleStore = useArticleStore()

// 根据 ID 获取文章详情
const articleDetail = computed(() => 
  articleStore.articles.find(
    item => item.id === Number(route.params.id)
  ) || {}
)
console.log(articleDetail);

// 定义ref
const todayDate=ref('')
const today = articleStore.todayArticle
const befor = articleStore.beforeArticles
console.log(today);
console.log(befor);



onMounted(async() => { 
  todayDate.value = formateDate(new Date())

})

</script>

<style lang="less" scoped>

.head {
  background:#fff;
  height: 70px; 
  padding: 0 20px; 
  position: fixed;
  top: 0;
  border: 1px solid #F3F4F6;
  color: #000;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  .icon-aixin{
    width: 25px;
    height: 25px;
    color: #8B5CF6;
    font-size: 25px;
  }
  .arrow{
    width: 25px;
    height: 25px;
    color: #8B5CF6;
  }
}
.box1{
  height: 70px;
}
.content{
  padding: 20px;
  background: #fff;
  .title{
    font-family: Roboto, Roboto;
    font-weight: 600;
    font-size: 24px;
    color: #111827;
    line-height: 32px;
    text-align: left;
  }
  .desc{
    margin-top: 12px;
    font-size: 16px;
    color: #8693A5;
    line-height: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .author{
      font-family: Roboto, Roboto;
      font-weight: 400;
      font-size: 14px;
      color: #6B7280;
      line-height: 20px;
      text-align: left;
      margin-right:16px ;
     }
     .date{
      font-family: Roboto, Roboto;
      font-weight: 400;
      font-size: 14px;
      color: #6B7280;
      line-height: 20px;
      text-align: left;
     }
  }
  .today-content{
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #374151;
    line-height: 23px;
    text-align: left;
  }
}

.foot{
  position: fixed;
  bottom: 0;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  text-align: center;
  width: 100%;
  font-weight: 400;
  display: flex;
  padding: 16px;
  box-sizing: border-box;
  font-size: 20px;
  justify-content: right;
  .icon-shoucang{
    color: #8B5CF6;
    font-size: 20px;
    margin-right: 15px;
 
  }
  
}


</style>